<template>
  <div class="home">
    <div class="minibox">
      <div ref="SCEchart" style="width: 340px;height:300px;"></div>
    </div>
    <div class="minibox">
      <div ref="SCEchart2" style="width: 500px;height:300px;"></div>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float: left">提示</span>
      </div>
      <div>
        <div>
          已注册科队成员数:
          <el-link>35</el-link>
        </div>
        <div>未毕业科队成员数:
          <el-link>35</el-link>
        </div>
        <div>用户量:
          <el-link>50</el-link>
        </div>
        <div>访问量:
          <el-link>1350</el-link>
        </div>
        <div>待审核申请:
          <el-link>44</el-link>
        </div>
        <div>自习室座位剩余:
          <el-link>6</el-link>
        </div>
      </div>
    </el-card>


  </div>
</template>

<script>
let echarts = require('echarts')

export default {
  name: 'Home',
  components: {},
  mounted() {
    this.getSCE();
    this.getSCE2();
  },
  methods: {
    getSCE() {
      const myChart = echarts.init(this.$refs.SCEchart);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            center: ['50%', '37%'],
            name: '成员分组信息',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '编程语言组'},
              {value: 735, name: '网络安全组'},
              {value: 580, name: '平面设计组'},
              {value: 484, name: '动画微课组'},
              {value: 300, name: '数字媒体组'},
              {value: 300, name: '信息服务中心'}
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    },
    getSCE2() {
      const myChart = echarts.init(this.$refs.SCEchart2);
      const option = {
        title: {
          text: '近一天被访问'
        },
        xAxis: {
          type: 'category',
          data: ['0:00-2:00', '2:00-4:00', '4:00-6:00', '6:00-8:00', '8:00-10:00', '10:00-12:00', '12:00-14:00',
            '14:00-16:00', '16:00-18:00', '18:00-20:00', '20:00-22:00', '22:00-24:00']
        },
        tooltip: {
          trigger: 'item'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 130, 50, 100, 160, 250, 260, 255, 263, 200, 160, 130],
            type: 'line'
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>
<style scoped>
.home {

  display: flex;
  justify-content: space-around;
}

.minibox {
  margin-top: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 200px;
  height: 250px;
}
</style>